<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #formIdiv{
            width: 500px;
            height: 300px;
            margin: 150px 0 0 400px;


        }

        #user{
            margin: 30px 0 0 0;
        }

    </style>
    <!--导入boostrap的css样式-->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <!--导入Jquery的js库-->
    <script src="js/jquery-3.4.1.min.js"></script>
    <!--导入boostrap的核心js库-->
    <script src="js/bootstrap.min.js"></script>

</head>
<body>

<!--
        boostrap里面 表单水平样式

        class="form-horizontal
                水平排列的表单

                    组成:
                            label元素----表单里面的设置名称
                            后面div控件组成 :表单项

                  class="form-group"属性:将lable和后面div控件的表单 :自适应排列

-->
<div class="container-fluid table-bordered" id="formIdiv">
    <form class="form-horizontal">

        <div class="form-group" id="user">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="username" placeholder="请输入用户名">
            </div>
        </div>
        <div class="form-group">
            <!--                col-sm-2:超小屏幕 占2个格子-->
            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-success">登录</button>
            </div>
        </div>
    </form>

</div>


</body>
</html>